/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import 'base/environment';
@import "deprecated/bootstrap/mixins";
@import 'vendor/bootstrap/button-groups';

$border-dark:  #c1c7cf;
$border-light: #e1e3e4;
$left-offset:  16px;

#tab-features .alert {
  margin-bottom: 20px;
  padding: 8px 35px 8px 14px;
}

.feature-flags {
  border: 1px solid $border-dark;
  border-radius: 3px;
  color: $ic-font-color--subdued;
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
}

.feature-flag {
  border-bottom: 1px solid $border-light;
  line-height: 30px;
  padding: 6px 6px 6px $left-offset;

  &:last-child {
    border-bottom: none;
  }
}

.feature-flag .element_toggler, .feature-flag .element_toggler:hover {
  color: $ic-font-color-dark;
  text-decoration: none;
}

.feature-flag .element_toggler {
  transition: outline-offset 0.2s ease-out;
  @include ic-focus-base;
  &:focus { @include ic-focus-variant; }
}

.feature-flag .ui-button {
  min-width: 25px;
}

.feature-flag-group-title {
  @include fontSize(16px);
  font-weight: bold;
  line-height: 24px;
  padding-left: $left-offset;
}

.feature-title {
  font-weight: bold;
  margin-right: 8px;
}

.feature-release, .feature-release-notes-link {
  @include fontSize(12px);
}

.feature-release-date {
  font-weight: bold;
}

.feature-details {
  display: none;
  @include fontSize(12px);
  line-height: 20px;
  margin-top: 16px;
  position: relative;
}

.feature-details p {
  padding-left: 24px;
}

.feature-detail-links {
  bottom: 0;
  position: absolute;
  right: 0;
}
// this snippet styles the feature flag description so it allows
// it to be underlined / highlighted
.feature-detail-underline {
  text-decoration: underline;
}

$switch-background: $ic-color-medium-darker;
$switch-background-disabled: lighten($switch-background, 40%);
$switch-text: rgba($ic-color-light, 0.8);

.ff-background {
  display: inline-block;
  background-color: $switch-background;
  margin: 0px -2px;
  &.ff-disabled {
    background-color: $switch-background-disabled;
  }
  &.ff-left {
    border-radius: 20px 0 0 20px;
  }
  &.ff-right{
    border-radius: 0 20px 20px 0;
  }
}

.ui-buttonset--feature-settings {
  .ui-button {
    background-color: $switch-background;
    color: $switch-text;
    border-color: $switch-background;
    border-width: 3px;
    margin: 0;
    text-transform: uppercase;
    @include fontSize(12px);
    border-radius: 20px;
    height: 15px;
    line-height: 15px;
    font-weight: bold;
    &.ui-corner-left {
      border-radius: 20px;
    }
    &.ui-corner-right {
      border-radius: 20px;
    }
    &.ui-state-active {
      background-color: $ic-color-light;
      color: $switch-background;
      border-color: $switch-background;
      box-shadow: 0 3px 6px rgba(black, 0.3);
      &.ui-state-focus {
        box-shadow:
          inset 0 0 0 1px $ic-color-light,
          inset 0 0 0 3px $switch-background,
          0 3px 6px rgba(black, 0.3);
      }
    }
    &.ui-state-disabled {
      opacity: 1;
      background-color: $switch-background-disabled;
      border-color: $switch-background-disabled;
      &.ui-state-active {
        background-color: $ic-color-light;
        color: $switch-background-disabled;
        box-shadow: none;
      }
    }
    &.ui-state-hover {
      border-color: $switch-background;
      color: white;
      background-color: $switch-background;
      &.ui-state-active {
        background-color: $ic-color-light;
        color: $ic-font-color-dark;
      }
    }
  }
}
